<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE自定义指令</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input v-model="myName"/><br/>
            <input v-focus="myName"/><br/>
        </div>
    </body>
    <script type="text/javascript">
        Vue.directive('focus', {
            bind: function() {
                console.log("执行bind方法");
            },
            unbind: function() {
                console.log("执行unbind方法");
            },
            inserted: function(el) {
                console.log("该组件插入父组件");
                el.focus();
            },
            update: function(el, binding) {
                console.log("指令的值被修改了[oldValue:" + binding.oldValue + ", value:" + binding.value + "]");
            },
            componentUpdated: function() {
                console.log("执行了componentUpdated");
            }
        });

        var vueObj = new Vue({
            el: '#app',
            data: {
                keyWord1: "",
                keyWord2: "",
                myName: ""
            }
        });
    </script>
</html>